<template>
  <div class="helper">
    <span class="left">未完成数：{{unCompletedTodoLength}}</span>
    <span class="tabs">
      <span
        v-for="state in states"
        :key="state"
        :class="['state', filter === state?'actived':'']"
        @click="toggleFilter(state)">
        {{state}}
      </span>
    </span>
    <!--<span class="clear" @click="clearAllCompleted">清除所有已完成</span>-->
    <span class="clear" @click="choicedata">{{timeRange}}</span>

    <Modal v-model="showDialog" title="请选择时间段">
      <div class="dialog_tip">
        <span>请选择时间段：</span>
        <RadioGroup v-model="tempSelect" @on-change="mytimeRangeSelect">
          <Radio label="近三天"></Radio>
          <Radio label="一个月"></Radio>
          <Radio label="全部"></Radio>
        </RadioGroup>
      </div>
      <div class="dialog_tip" style="margin-top: 20px">
        <span>自定义时间段：</span>
      </div>

      <div>
        <DatePicker type="date" placeholder="开始时间" format="yyyy/MM/dd" style="width: 200px"
                    v-model="startTime"></DatePicker>
        --
        <DatePicker type="date" placeholder="结束时间" format="yyyy/MM/dd" style="width: 200px"
                    v-model="endTime"></DatePicker>
      </div>

      <!--使用插槽形式替换掉按钮（这样可以在关闭前做一些逻辑判断）-->
      <div slot="footer">
        <Button type="text" size="large" @click="cancelSelectTime">取消</Button>
        <Button type="primary" size="large" @click="selectTime">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<style lang="stylus" scoped>

  .dialog_tip {
    color: #000
    font-size 16px
    font-weight 200px
    margin-bottom 10px
    margin-top 0px
  }

  .helper {
    font-weight 16px
    line-height 30px
    display flex
    flex-direction row
    background-color white
    font-size 14px
    font-smoothing: antialiased;
  }

  .left, .clear, .tabs {
    padding 0 10px
    box-sizing border-box
  }

  .actived {
    background-color #2d8cf0
    border 1px solid #2d8cf0
    color: #fff
  }

  .state {
    margin 6px
    padding: 1px 4px 1px 6px

    text-align center
  }

  .left {
    width 200px
  }

  .tabs {
    flex: 1
    text-align center
    cursor pointer
  }

  .clear {
    width 200px
    text-align right
    cursor pointer
  }
</style>

<script>
  import {getDay,getSimpleFormatDate} from '../utils/timeUtils'
  export default {
    props: {
      filter: {
        type: String,
        required: true
      },
      todos: {
        type: Array,
        required: true
      }
    },
    computed: {
      unCompletedTodoLength() {
        return this.todos.filter(todo => !todo.completed).length
      },
//      timeRange(){
//        return '近三天'
//      }
    },
    data() {
      return {
        states: ['全部', '未完成', '已完成'],
        showDialog: false,
        startTime: '',
        endTime: '',
        finalStartTime:'',
        finalEndTime:"",
        tempSelect: '',
        timeRange:''
      }
    },
    methods: {
      toggleFilter(state) {
        this.$emit('toggle', state)
      },
      clearAllCompleted() {
        this.$emit('clearComplete')
      },
      choicedata() {
        this.tempSelect = ''
        this.showDialog = true
      },
      cancelSelectTime() {
        this.showDialog = false
      },
      selectTime() {
        if(this.tempSelect===''){
          if(this.startTime===''||this.endTime===''){
            alert("请选择时间")
            return
          }else {
            this.finalStartTime = getSimpleFormatDate(this.startTime);
            this.finalEndTime = getSimpleFormatDate(this.endTime);
            this.showDialog = false
            this.timeRange = this.finalStartTime+"至"+this.finalEndTime
          }
        }else {
          this.showDialog = false
        }
        //发送到todo 去请求结果
        this.$emit('selectTime', this.finalStartTime,this.finalEndTime)
      },
      mytimeRangeSelect(value) {
//        计算起始时间
        if (value === '近三天') {
          var startTime = getDay(-3)
          var endTime = getDay(0)
          this.finalStartTime = startTime
          this.finalEndTime = endTime
          this.timeRange = '近三天'
        } else if (value === '一个月') {
          var startTime = getDay(-30)
          var endTime = getDay(0)
          this.finalStartTime = startTime
          this.finalEndTime = endTime
          this.timeRange = '一个月'
        } else {
          this.finalStartTime = 'all'
          this.finalEndTime = 'all'
          this.timeRange = '全部'
        }

        this.startTime = ''
        this.endTime = ''
      },

    },
    created(){
      this.finalStartTime = getDay(-3)
      this.finalEndTime = getDay(0)
      this.timeRange = '近三天'
    }
  }
</script>
